<template>
  <div>
    <el-radio-group v-model="radio1">
      <el-radio label="男" size="large">男</el-radio>
      <el-radio label="女" size="large">女</el-radio>
    </el-radio-group>
  </div>

  <h1>禁用状态</h1>
  <div>
    <el-radio v-model="radio2" disabled label="disabled">Option A</el-radio>
    <el-radio v-model="radio2" disabled label="selected and disabled">Option B</el-radio>
  </div>


  <h1>单选框组</h1>
  <div>
    <el-radio-group v-model="radio3">
      <el-radio :label="3">Option A</el-radio>
      <el-radio :label="6">Option B</el-radio>
      <el-radio :label="9">Option C</el-radio>
    </el-radio-group>
  </div>

  <h1>按钮样式</h1>
  <div>
    <el-radio-group v-model="radio4" size="large">
      <el-radio-button label="New York" />
      <el-radio-button label="Washington" />
      <el-radio-button label="Los Angeles" />
      <el-radio-button label="Chicago" />
    </el-radio-group>
  </div>

  <h1>带有边框</h1>
  <div>
    <el-radio-group v-model="radio5">
      <el-radio label="1" size="large" border>Option A</el-radio>
      <el-radio label="2" size="large" border>Option B</el-radio>
    </el-radio-group>
  </div>

  <h1>触发事件</h1>
  <div>
      <el-radio label="1" size="large" border @change="A">Option A</el-radio>
      <el-radio label="2" size="large" border @change="B">Option B</el-radio>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const radio1 = ref('男')
const radio2 = ref('selected and disabled')
const radio3 = ref(3)
const radio4 = ref('New York')
const radio5 = ref('1')

const A = ()=>{
  alert('A')
}

const B = ()=>{
  alert('B')
}
</script>

<style scoped>

</style>